<template>
    <view class="redEnvelope">
        <image src="/static/image/redEnvelope.png" mode="scaleToFill" class="redEnvelopeImg" />
        <view class="container">
            <view class="btnContainer">
                <view class="btn" @click="getRedMoney">立即领取</view>
            </view>
            <view class="rule">
                <text class="ruleTitle">天天红包规则</text>
                <text class="ruleItem">1、任意下一单，即可每天 9:30~17:30 抢红包一次。</text>
                <text>2、红包累计金额小于等于你的消费金额，红包发放到余额。</text>
                <text>3、红包大小由你的消费金额和消费频率决定，你在平台上消费金额越大，下单的次数越多，每次抢到的红包金额就越大。</text>
            </view>
        </view>

        <footer-menu :tabCur="1"></footer-menu>

    </view>
</template>

<script>
import footerMenu from "@/components/footer-menu.vue"

export default {
    components: {
        footerMenu
    },
    methods: {
        async getRedMoney() {
            await uni.request({
                url: this.$apiUrl + '/api/user/getRedMoney',
                header: {
                    'userId': uni.getStorageSync('userId'),
                    'userToken': uni.getStorageSync('userToken'),
                    'shopId': uni.getStorageSync('shopId')
                },
                success: (res) => {
                    if (res.data.code !== 200) {
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'error',
                        })
                    } else {
                        uni.showToast({
                            title: '领取成功',
                            icon: 'none',
                        })
                    }
                },
            })
        }
    }
}
</script>

<style scoped lang="scss">
.redEnvelope {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;

    .redEnvelopeImg {
        width: 100%;
        height: calc(100% - 52px);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .container {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 140rpx;
        box-sizing: border-box;

        .btnContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: auto;

            .btn {
                width: 370rpx;
                height: 90rpx;
                font-size: 24px;
                font-weight: 700;
                letter-spacing: 2rpx;
                color: #FFFFFF;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 59rpx;
                background: linear-gradient(180deg, rgba(250, 166, 130, 1) 0%, rgba(234, 10, 37, 1) 100%);
                box-shadow: 0 4rpx 20rpx rgba(234, 10, 37, 0.3);
            }
        }

        .rule {
            padding-inline: 38rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            border-radius: 20rpx 20rpx 0 0;
            margin: 0 20rpx;
            padding-top: 30rpx;

            .ruleTitle {
                text-align: center;
                font-size: 40rpx;
                font-weight: 700;
                color: #000000;
                padding-bottom: 18rpx;
            }

            text {
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40.54rpx;
                color: #333;
            }

            .ruleItem {
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40.54rpx;
                color: #333;
            }
        }
    }


}
</style>